import React, { useContext, useEffect, useState } from 'react';
import cs from 'classnames';

import styles from './style/index.module.less';
import {
  Button,
  Form,
  Grid,
  Link,
  Space,
  Table,
  TableColumnProps,
} from '@arco-design/web-react';
import { IconDelete, IconPlus } from '@arco-design/web-react/icon';
import { GlobalContext } from '@/context';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import WhoCreate from './whoCreate';
import { EnumsRes } from '@/api/interface';

const { Row, Col } = Grid;
const { useForm } = Form;
export interface Violator {
  key?: number;
  concernedParties: string;
  nationality: string;
  role: string;
}
export function Who({
  value,
  onPush,
  complainantEnums,
  nationalityEnums,
}: {
  complainantEnums: Array<EnumsRes>;
  nationalityEnums: Array<EnumsRes>;
  value: Array<Violator>;
  onPush: (violator: Array<Violator>) => void;
}) {
  const [violators, setViolators] = useState<Array<Violator>>(value);

  const onAdd = (v: Violator) => {
    const key =
      violators.length > 0 ? violators[violators.length - 1].key + 1 : 1;
    setViolators((violators) => [...violators, { ...v, key: key }]);
    form.resetFields();
    setVisible(false);
  };

  const onRemove = (key: number) => {
    setViolators(violators.filter((item) => item.key !== key));
  };
  useEffect(() => {
    onPush(violators);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [violators]);

  const { rtl, lang } = useContext(GlobalContext);
  const t = useLocale(locale);
  const [form] = useForm();
  const columns: TableColumnProps[] = [
    {
      title: t['who.id'],
      dataIndex: 'key',
    },
    {
      title: t['who.concernedParties'],
      dataIndex: 'concernedParties',
    },
    {
      title: t['who.role'],
      dataIndex: 'role',
      width: 130,
      render: (a: any): JSX.Element => {
        return (
          <>
            {
              complainantEnums.find((b) => b.key === a).value[
                lang === 'en-US' ? 'en' : 'ar'
              ]
            }
          </>
        );
      },
    },
    {
      title: t['who.nationality'],
      dataIndex: 'nationality',

      render: (a: any): JSX.Element => {
        return (
          <>
            {
              nationalityEnums.find((b) => b.key === a).value[
                lang === 'en-US' ? 'en' : 'ar'
              ]
            }
          </>
        );
      },
    },
    {
      title: t['who.action'],
      dataIndex: 'action',
      width: 120,
      render: (_, b) => {
        return (
          <Link
            hoverable={false}
            status="error"
            onClick={() => onRemove(b.key)}
          >
            {/* {t['delete']} */}
            <IconDelete />
          </Link>
        );
      },
    },
  ];

  const [visible, setVisible] = useState(false);

  return (
    <div className={cs(styles['block'], rtl ? 'rtl' : '')}>
      <div className={styles['block-title']}>{t['who.who']}</div>
      <WhoCreate
        visible={visible}
        onVisible={setVisible}
        onAdd={onAdd}
        complainantEnums={complainantEnums}
        nationalityEnums={nationalityEnums}
      />
      <Row align="end">
        <Col span={3}>
          <Space direction="vertical" size={[12, 18]}>
            <Button
              type="primary"
              icon={<IconPlus />}
              onClick={() => setVisible(true)}
            >
              {t['who.addfield']}
            </Button>
          </Space>
        </Col>
      </Row>
      <Table
        pagination={false}
        columns={columns}
        data={violators}
        border={{
          wrapper: true,
          cell: true,
        }}
        rowKey="key"
      />
    </div>
  );
}

export default Who;
